.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  @include flex-column;
  justify-content: center;


  // NOTE: 取巧做法 transition in / appear 好像需要同步?
  &--entering,
  &--entered {
    animation: popupShowMask 0.5s linear forwards;

    .popup__main {
      animation: popupShowMain 0.5s cubic-bezier(1, -0.5, 0, 1.2) forwards;
    }
  }

  &--exiting,
  &--exited {
    animation: popupHiddenMask 0.5s linear forwards;

    .popup__main {
      animation: popupHiddenMain 0.5s cubic-bezier(1, -0.5, 0, 1.2) forwards;
    }
  }

  &__main {
    width: 100%;
    @include flex-column;
    justify-content: center;
    will-change: auto;

    &--drawer {
      @keyframes fadeIn {

        0% {
          transform: translateY(100%);
        }

        100% {
          transform: none;
        }
      }

      animation: fadeIn 300ms linear forwards;
    }
  }

  &__mask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
  }

  &__decorate {
    z-index: 2;
    display: flex;
  }

  &__stereoscopic {
    display: flex;
    position: relative;
    width: 349px;
    padding-top: 7px;
    border-radius: 34px;
    background: linear-gradient(to right, #995aa1, #8034b4 80%);
  }

  &__content {
    width: 351px;
    border-radius: 18px;
    box-shadow: inset 0 1px 1px 0 #ffeba9;
    border: solid 1px #ffae58;
    position: relative;
    z-index: 2;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 8px;
    background-image: linear-gradient(to bottom, #844aff, #d3301d 133%);
    &--drawer {
      width: 100%;
      border-radius: 18px 18px 0 0;
      box-shadow: inset 0 1px 1px 0 #ffeba9;
      border: solid 1px #ffae58;
    }
  }

  &__close-btn {
    width: 46px;
    height: 46px;
    position: absolute;
    right: -10px;
    top: -10px;
    border-radius: 50%;
    @include flex-center;
    background: linear-gradient(to bottom, rgba($color: #f3fff3, $alpha: 0.19) -13%, rgba($color: #fffc9b, $alpha: 0.19) 179%);

    i {
      width: 18px;
      height: 18px;
      @include flex-center;
      position: relative;
      transform: rotate(45deg);
      margin-left: -9px;
      margin-top: 9px;
      &::before {
        content: "";
        height: 15px;
        width: 2px;
        background-color: #fff0b7;
        position: absolute;
      }

      &::after {
        content: "";
        height: 15px;
        width: 2px;
        background-color: #fff0b7;
        transform: rotate(90deg);
        position: absolute;
      }
    }
  }

  &--drawer {
    justify-content: flex-end;
  }
}
